<template>
  <div class="user-menu">
    <!--页面刷新 -->
    <div class="user-menu-item hover-effect" @click="reloadCurrent">
      <a-icon type="reload" style="padding:0 10px;" />
    </div>
    <!-- 头部通知 -->
    <div class="user-menu-item hover-effect">
      <a-dropdown :trigger="['click']">
        <div class="header-notice">
          <a-badge count="9">
            <a-icon type="bell" />
          </a-badge>
        </div>
        <a-menu slot="overlay">
          <user-message></user-message>
        </a-menu>
      </a-dropdown>
    </div>
    <!-- 用户菜单 -->
    <div class="user-menu-item hover-effect">
      <a-dropdown placement="bottomRight">
        <div>
          <a-avatar size="small" :src="avatarUrl"></a-avatar>
          <span>{{userName}}</span>
        </div>
        <a-menu slot="overlay" class="user-dropdown-menu-wrapper">
          <a-menu-item>
            <router-link to="/dashboard/userInfo">
              <a-icon type="user" />
              <span>个人中心</span>
            </router-link>
          </a-menu-item>
          <a-menu-item @click="restUserPass">
            <a-icon type="setting" />
            <span>修改密码</span>
          </a-menu-item>
          <a-menu-divider />
          <a-menu-item @click="logoutHander">
            <a-icon type="logout" />
            <span>退出登录</span>
          </a-menu-item>
        </a-menu>
      </a-dropdown>
    </div>
    <a-modal
      v-if="visibleRestUserPass"
      v-model="visibleRestUserPass"
      title="用户密码修改"
      @ok="restUserPassword"
    >
      <rest-user-password ref="restUserPassword"></rest-user-password>
    </a-modal>
  </div>
</template>

<script>
import { viewImgApi } from "@/api/common";
import RestUserPassword from "@/views/org/user/component/restUserPassword";
import UserMessage from "@/views/org/user/component/userMessage";
export default {
  components: { RestUserPassword, UserMessage },
  data() {
    return {
      avatar: this.$store.getters.avatar,
      visibleRestUserPass: false
    };
  },
  methods: {
    async logout() {
      await this.$store.dispatch("user/logout");
      this.$router.push(`/login?redirect=${this.$route.fullPath}`);
    },
    logoutHander() {
      var _self = this;
      this.$confirm({
        title: "提示",
        content: h => (
          <div>
            <span>真的要注销登录吗？</span>
          </div>
        ),
        okText: "注销",
        onOk() {
          _self.logout();
        }
      });
    },
    //刷新当前页面 (跳入中转页面 再去要刷新的页面)
    reloadCurrent() {
      const { fullPath } = this.$route;
      this.$router.replace({
        path: "/redirect" + fullPath
      });
    },
    restUserPass() {
      this.visibleRestUserPass = true;
    },
    restUserPassword() {
      this.$refs.restUserPassword.onSubmit();
    }
  },
  computed: {
    avatarUrl() {
      return viewImgApi + this.avatar;
    },
    userName() {
      return this.$store.getters.userName;
    }
  }
};
</script>

<style lang="less">
.user-menu {
  float: right;
  height: 100%;
  line-height: 64px;

  .user-menu-item {
    display: inline-block;
    padding: 0 4px;
    height: 100%;

    color: #5a5e66;
    vertical-align: text-bottom;
    &.hover-effect {
      cursor: pointer;
      transition: background 0.3s;
      &:hover {
        background: rgba(0, 0, 0, 0.025);
      }
    }
    .header-notice {
      padding: 0px 10px;
      .anticon {
        font-size: 16px;
        padding: 4px;
      }
    }
    .ant-avatar {
      margin: 20px 8px 20px 10px;
      color: #1890ff;
      background: hsla(0, 0%, 100%, 0.85);
      vertical-align: middle;
    }
  }
}
.user-dropdown-menu-wrapper .ant-dropdown-menu-item {
  width: 160px;
}
.top-nav-header-index.light .user-menu .user-menu-item.hover-effect:hover {
  background: rgba(0, 0, 0, 0.025);
}
.top-nav-header-index.dark .user-menu .user-menu-item.hover-effect:hover {
  background: #313a4b;
}
</style>